@@@@@@@@@@@@@@@@@ TjzM@What's New 2002/11/29

@@@@@@@@@@@S҂̂߂̃z[y[W
@@@@@@@ @@@http://www.scollabo.com/banban/
@@@@@@@@@@@@@@@@29

@@@@@@@@@@@@@banban@scollabo.com



@̍u̓^OoăeLXgGfB^Ńz[y[WƂA
ǂ炩ƂƂIȍƂSɂȂ܂B

@ɂ͐IœȌtoĂ܂AȂׂS҂ɂ₷
Ă܂BǂACyȋCłtBu
钆ŕȂ_܂AȂ[B

@ułHTML4.01𒆐SƂ@̂ƂȂĂ܂BȂÃ}K
W͓tHgłǂ݂ƉKɓǂ߂悤ɂȂ܂B

@T̉ۑ  {bNXp
@@@@@@  [vfCSS



{bNX

@ɖ{TŁA{bNXɂĉ܂A͂̉pɂ
āAڂ܂B

@eLXgubNA摜Aʒuw肳ꂽReiAX^CV[g{
ꂽevf́A{bNXꂽlp̈𐶐܂B
@܂Aǂ̂悤ȗvfłAʂɕ\ɂ́Alp̈
\邱ƂɂȂ܂B

@Ⴆ΁Aovfł́Aɒlp̈AuEUɂĂ͗]
^܂BiAe[uAXg{Iɂ́Alp̈ł
킯łB炷ׂĂ{bNXƂTOɓĂ͂߂܂B



{bNX̌w肷

@{bNXŜ\ɂAP\A܂XN
[o[݂肳邱ƂAX^CV[gŐݒ\łB

@clip̒lƋ@\iCSS Level 2j
  vf̈ꕔ؂ĕ\ݒ
@ȂA̐ݒŁAposition absolute ɎwȂƁAʂ
@܂B

@@rect@w肵`̈؂ĕ\܂B
@@@@@sNZPʂŁAAEAȀŕ\̈؂蔲܂B
@@@@@@EFӂ\ʒu[܂ł̊Ԋu
@@@@@@EEFӂ\ʒuE[܂ł̊Ԋu
@@@@@@EFӂ\ʒu܂ł̊Ԋu
@@@@@@EFӂ\ʒu܂ł̊Ԋu

@@auto@Ŝ\iftHglj

@ł́Ȃg\Ă݂܂傤B
@@eLXgGfB^NHTML܂BL̂悤Ƀ^CvĂ
@BȂARuFvAZ~RuGvԈႦȂ悤ɁB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>摜̈ꕔ̕\</title>
<style type="text/css">
<!--
h1 { clip: rect(auto,auto,25px,auto);
     position: absolute;
     left: 200px;
     background-color: #f0c;
     color: white }

img { position: absolute;
      top: 100px }

img#smp1 { clip: rect(40px,200px,125px,55px);
           left: 300px }

img#smp2 { clip: rect(90px,250px,180px,128px);
           left: 500px }
-->
</style>
</head>

<body>
<h1>摜̐؂蔲</h1>
<div>
<img src="images/sakura.jpg" width="250" height="180" alt="s̍">
<img id="smp1" src="images/sakura.jpg" alt="s̍">
<img id="smp2" src="images/sakura.jpg" alt="s̍">
</div>

</body>
</html>

@͂I܂HTMLƂĕۑ܂B̂߂ɂ͕Kgq
ĕۑ܂Bł́Atest_31.html ƂĂ܂Bu.htmlvY
ɕۑĂBȂAۑ̍ۂ͔̕Cӂ̖OĂ
Ăx܂B

@TvHTMLsURL
  http://www.scollabo.com/banban/magazine/sample/mmsample_045.html





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
@{Ȃ΁AStrictgp̂łAWindows MSIEł́Aclip
@\ɌʂoȂ߁AĂ DTD̗p܂B
@@iMSIẼoOƎv܂Bj

h1 { clip: rect(auto,auto,25px,auto); position: absolute; left: 200px;
     background-color: #f0c; color: white }
@ovf̌ݒ肵܂BɔwiFsNɂĂ܂B
@̐ݒł́Aỏ25sNZ؂蔲܂B

img { position: absolute; top: 100px }
@ׂẲ摜̐Έʒuォ 100sNZɎw肵܂B̐ݒ肪
@ȂƁAؔ̌ʂ܂B

img#smp1 { clip: rect(40px,200px,125px,55px); left: 300px }
@̉摜؂蔲ĕ\܂B摜̏㑤40sNZAA200
@sNZAォ125sNZA55sNZ؂蔲܂B
  ̐ݒ́AidpĂ܂B

@iؔ̃C[W}j
@@
@@ i摜j    @@@    @@@@@@@@@@@@@ @
@@@@@@@@40px@@@@    @@@@ @ @@@@@@@
@@             @@@@@    @@@@@ @@@@@@@
@@       @{   @
@@         i؂蔲j@@@@@@@@@@@ @
@@ 55px                         125px        @ @
@@                                             @ @
@@ {  200px   {@ @
                                                 @ @
@@         @ @
@@                                                   @ @
    

<img id="smp1" src="images/sakura.jpg" alt="s̍">
@X^CV[g img#smp1 Ăяo idpĂ܂B
@widthAheightȗ܂Aɍŏ̉摜Őݒ肵Ă܂̂ŁA
@ďȗ܂B



overflow

@{bNẌ̗Awidth heightgāA⍂w肵ꍇAR
ecɂẮA܂肫Ȃꍇ܂B
@Ă܂Rec̕\@w肷̂AoverflowłB

@overflow̒lƋ@\iCSS Level 2j
@@visible@ ̈w𖳎č╝߂AׂẴRec
@@@@@@@\܂B
@@scroll@@cɃXN[o[݂āA[ȖɂRec
@@@@@@@@łB
@@hidden@@̈wɏ]āA܂肫ȂRec\܂B
@@auto@@@uEU܂B

@̕@gHTML܂B

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>overflow</title>
<style type="text/css">
<!--
div { margin-bottom: 1em;
      width: 150px;
      height: 100px }

div#samp1 { overflow: visible }

div#samp2 { overflow: scroll }

div#samp3 { overflow: hidden }

div#samp4 { overflow: auto }
-->
</style>
</head>

<body>
<div id="samp1">
<img src="images/sakura.jpg" width="250" height="180" alt="s̍">
</div>

<div id="samp2">
<img src="images/sakura.jpg" width="250" height="180" alt="s̍">
</div>

<div id="samp3">
<img src="images/sakura.jpg" width="250" height="180" alt="s̍">
</div>

<div id="samp4">
<img src="images/sakura.jpg" width="250" height="180" alt="s̍">
</div>


</body>
</html>

@͂I܂HTMLƂĕۑ܂Bł́Atest_32.html 
ƂĂ܂B

@TvHTMLsURL
  http://www.scollabo.com/banban/magazine/sample/mmsample_046.html





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
@HTML4.01Strict̕^錾łB̎dĺA񐄏ɂȂĂvf⑮
@́A؎gƂł܂B

div { margin-bottom: 1em; width: 150px; height: 100px }
@ėpubNxvf́A 150sNZA 100sNZƂ
@B܂A̗]Pɐݒ肵܂B

div#samp1 { overflow: visible }
@ėpubNxvf̃RecׂČ悤ɐݒ肵܂B
@̂߁A⍂̐ݒ̐󂯂ɁARecŜ邱
@ł܂BidɂLqłB

div#samp2 { overflow: scroll }
@ėpubNxvfɃXN[o[ݒ肵A܂肫ȂRe
@cXN[邱ƂɂČ悤ɂ܂B

div#samp3 { overflow: hidden }
@ėpubNxvf̒̎܂肫Ȃ̃Rec\ɂ
@܂BĂ܂Rec͐؂̂Ă`ɂȂ܂B

div#samp4 { overflow: auto }
@\@́Asamp2iscrolljƓ`ɂȂ܂B
@RecɂẮAɈقȂꍇ܂B



[vf

@X^CV[g̃xQŎĂ[vfɂĐ܂B
̃X^CV[ǵAubNxvfł̂݌ʂ܂B

@vf:first-letter  @vf̐擪̕ɓKp
@vf:first-line    @vf̍ŏ̍ŝݓKp
@vf:befor           vf̒OɓKp
@vf:after           vf̒ɓKp

@T|[g
@:beforA:after ɂ MSIE̓T|[gĂ܂B
@܂AMacintosh MSIE 5.0ȍ~ŁAfirst-letter̕\ɃoO܂B
  {AuEUŃT|[gȂꍇ́Aݒ𖳎܂Â
@Mac MSIEł́AȂǂ́uǏv܂B
@@͂܂AT|[gĂ邯ǁAoOƂ킯łB
   i}CN\tgAƂĂIj

  Netscapeł́A6.0ȍ~łׂăT|[gĂ܂BMozillalB
@ilbgXP[vA炢I)

@Operał́ANetscapelT|[gĂ܂B
@iIyA炢Ij

@MacintoshpuEU iCab łCSS Level 2 ͖ΉxĂ܂B
@ȂA񎋊onuEUł́Ahݒ肷X^CV[ĝ̂A
@ΉłB

ł́A̋[vfgHTML܂B
@eLXgGfB^NāAL̂悤Ƀ^CvĂB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>S҂̂߂̃z[y[W</title>
<style type="text/css">
<!--
h1:first-letter { color: #090}

h1 { font-size: large; 
     border-top: thin #009 solid; 
     border-bottom: thin #009 solid; 
     background-color: #ffc }

h2:first-letter { font-size: x-large; 
                  color: #f00 }

h2 { font-size: medium }

p:first-line { background-color: yellow }

h3:before { content: "y";
            color: #00f }

h3:after  { content: "z"; 
            color: #00f }

div { margin: 10px 100px }

span:first-child { font-weight: bold; 
                   color: purple; 
                   border-bottom: medium purple dotted }
-->
</style>
</head>

<body>
<div>
<h1> [vf</h1>
<p>
[vfƂ́Avf̓̌ɃX^Cݒ肵܂Bŏ̐̕F
ςAŏ̍s̕\@ݒł܂Bł́AF̔wiF
ݒ肵܂B
</p>

<h2>ݒ肷vf</h2>
ݒ肷vf́AubNxvf̌Ă܂BCCxvf
ł͖Ă܂܂̂ŁAӂ܂傤B

<h3>T|[g</h3>
cOȂAׂẴuEUŃT|[gĂ킯ł͂܂B
<p>
Macintosh MSIEł̓oO܂B̂ƂANetscape 6.0ȏłׂ
\\łB
</p>
</div>
<div>
[vf܂gāA<span>z[y[W</span> ɍʂ^܂B
</div>

</body>
</html>

@͂I܂HTMLƂĕۑ܂Bł́Atest_33.html 
ƂĂ܂BꂮgqYȂ悤ɂ܂傤B

@TvHTMLsURL
  http://www.scollabo.com/banban/magazine/sample/mmsample_047.html





h1:first-letter { color: #090}
@Povf̍ŏ̐̕F΂ɐݒ肵܂B
@Macintosh MSIEł͕̉\܂Bŏ̕uBvƕ\
@邱Ƃ܂B

h1 { font-size: large; border-top: thin #009 solid; 
     border-bottom: thin #009 solid; background-color: #ffc }
@Povf̑̕傫 largeAF͗΂ƂA㉺ɍׂ΂̘g
@ݒ肵܂B܂Avf̔wiF͔N[FłB{TCg
@xXoꂷݒłB

h2:first-letter { font-size: x-large; color: #f00 }
@Qovf̍ŏ̕FԂɁAtHg̑傫 x-largeɐݒ肵
@܂B Macintosh MSIE ł͕̉\܂B

h2 { font-size: medium }
@Qovf̑̕傫Amedium Ƃ܂B

p:first-line { background-color: yellow }
@i\킷 pvf̍ŏ̍ŝ݁AwiFFƂ܂Bs
@̐ݒ肪ɂȂ܂Bis܂ށj

h3:before { content: "y"; color: #00f }
@Rovf̒OɐF̊ʁiy j\܂B

h3:after  { content: "z"; color: #00f }
@Rovf̒ɐF̊ʁi zj\܂B

div { margin: 10px 100px }
@ėpubNxvf̏㉺̗]10sNZAE 100sNZݒ
@܂B

span:first-child { font-weight: bold; color: purple; 
                   border-bottom: medium purple dotted }
@ubNxvf̒ŁAŏɌspanvf݂̂ɓKp܂B
@[NXƌĂԃX^CV[g̐ݒłB
@@ł̓éAF̕AF̓_ɐ݂Ă܂B
@WindowsAMacintosh MSIE  Operał̓T|[gĂȂ̂
@̕\͖܂BNetscape͑ΉĂ܂B



Tips --- uEȖΔiMSIE vs Netscapej

@1994NAݗꂽ΂ Netscape CommunicationsЂ́A Webu
EUC^[lbgŔzzAuԂɃVFAgbvi90ȏIjɂ̂
オAƊEWɂȂ܂B
@̍AHTML̓o[W 2.0ɂȂA҂̑Netscapeŕ\
HTMLĂ܂BiӖAaȎłEEj

@1995NA}CN\tgЂV OSłAWindows95𔭔AWŃo
hꂽAMicrosoft Internet Exploreriȉ MSIEjWƕyn
߂܂BuEU푈̖ułB

@ҁi邢̓[UjɂƂĂ͐\͊}łA}CN
\tgЂ̐헪ł WindowsOS̕WtANetscapẽVFA
XɒDAɋt]Ă܂܂B
iŋ߂ł́AMacintoshɂohĂB̃uEUAMSIEłBj

@1998NAW3CHTML4.0āANetscapeMSIEꂼVo[
W𔭕\܂B
@̎Netscape Navigator 4.0͂Ђǂ̂łBX^CV[gΉ
Ȃ炻̎Ԃ͋ɂ߂ĕnŁAMSIE̗Dʐ͋^悤܂
łBoO炯B
@̌ANetscape͏K͂̉ǂA4.78܂łɉς܂AMSIE
Ƃ͐\k܂邱Ƃ܂łB

@̎AD-HTMLi_Ci~bNHTMLjȂ錾toꂵAuEUœƎ
̎dlꂽƂŁA҂ɂƂĂ͑ςȎł̂łB
@D-HTMLJavaScriptƃX^CV[g𗘗p̂y[W̐ɑ
^܂ANetscapepAMSIEpƂQ̃y[W邱Ƃ
܂Bi쌻͑卬łEEj

@AMSIE͏ɃVFAL΂A70𒴂܂łɂȂ܂BMSIE
傫ȓƂāA̋Lq~XĂ銰e܂BāA
Ђ ActiveXƂ̐eaA}`fBAŁAdȃuEU
ł܂BAƎdl̂̂łEE

@NetscapeЂ́A2000NAJő̃voC_ AOLɔǍ
Vo[W 6.0 𔭕\A4.78傫ς܂B

@Navigator4.ł̎sAMSIElAI[v\[XMozillaGW
Ƃdlɑ傫ϖêłB
@6.0ł͓Ǝdlp~AW3Cɏ]dlƂȂAX^CV[g̎
̂ԂɂȂ܂BAeʂ傫ȂdȂĂ܂
Ƃ́A傫Ȍ_ł܂B
@iNetscapeɂ́Ao[WT݂͑Ă܂Bj

@݁AMSIE̐EIVFÁA93ɒBAƊEWƂȂ܂B
͂AJł́AMSIE̕\悯΂ŗǂAƂɂȂĂ
܂BiہÂ悤Ȉ˗Ő삵Ƃ܂Bj

@b͕ς܂ATAudq{AEEBhEYvƂVL
Ă܂Bv́A{̍s̃lbg[NVXeI[vOS
ɂ悤Ƃ݂ŁALinux ̗p铮܂B
@ɁACMXAhCcȂǂ̐{ł͒EEBhEYƂ Linux̗p
ł́Al̃p\ŔAقƂǂ LinuxɂȂĂ܂B
@iI[vŖƂ_܂Bj

@LinuxŎguEUƂ Netscape Mozilla Operaɑ\
Bă}CN\tgЂ MSIE Linux͍Ȃł傤B

@WindowsƊEWƂȂĂ̂́A MSIEڂĂł
܂BȗŔAƂŗp\Iȃ\tguOfficevƂA
vP[VE\tgłB݊dvƂł́AƊE̕W܂ł
ȂuOfficevK{̃\tgɂȂĂ܂B

@AuWordvuExcelvɑւL[EAvP[VLinuxœo
A̕y͉xIɑ傷ł傤ARAuEŨVFA
ւ܂B
@i݁AMS Office ̃f[^ OpenOffice 1.1 AT}CNVX
@@eЂ疳Ń[XĂBɏGȃ\tgBj

@MSIEAЂ WindowsOS̕Wł炱A̗ɂ߂
̂łāAėDĂł͂܂BĊOuʂ̐lv́A
̃uEU_E[hACXg[ȂĂƂ͂Ȃ悤łB
ĂꂪuʁvȂł傤B

@AMozilla Operâ悤ɍ@\łȂAyƂ
uEU̓o͑ł傤Bi܂ MSIE݂Ζł͂ȂEEj

@݁A召60܂̃uEU݂鍡AŜ́AMSIEł͂Ȃ
m܂B̂łǂ̂悤ɂςĂ܂̂ARs
[^[̐EȂ̂łB

  QlURLFuEU̗j
@http://www.scollabo.com/banban/tips/browser.html



͂܂ŁAł͂ł́EE
T̂炢͂vy[Wɂfڂ܂̂ŁA񌩂ĂĂB
vy[WHTML̎sʂ̃TvA蕪₷
܂B킹ĉߋ̋L̂炢fڂĂ܂B

iT̂炢j
http://www.scollabo.com/banban/magazine/backnm_028.html

́AJavaScriptu R\肵Ă܂B



Eӌ͂͂܂Ł@banban@scollabo.com

@ȂA̍ۂɂ́AgOSAʏgĂuEUAeLXgGf
B^ȂǁAȂׂ₷𖾋LĂƉ񓚂₷
ȂƎv܂B
@A̒Ԃ͉Ћ΂߂Ȃ̂ŁAԎx邱Ƃ܂B
B

sҁ@΂΂
@́@XYLER{[V@http://www.scollabo.com/
zMGW@܂܂@http://www.mag2.com/  iID@0000090196j

뎚EEEϊ~XE\RȂǂɂ͕ɂe͊肢܂BȂA}KW
ׂ̂Ă̋LqɌdȃXy~XꍇABƔlƋɎ܂
˂ĂƍKɎv܂B

obNio[@ŌJĂ܂B
v[eLXg  http://www.scollabo.com/banban/magazine/magazine.html
ê炢@@http://www.scollabo.com/banban/magazine/
A[JCu@@@@http://www.scollabo.com/banban/daf/archive.html
uށ@@@@@http://www.scollabo.com/banban/daf/material.html
܂܂̉ߋL@http://backno.mag2.com/reader/Back?id=0000090196

zM̕ύXE~͂łB
ʂ̎葱͎󂯕tĂ܂̂ŁAʓ|łeł肢łΏ
܂B
TCgɂā@http://www.scollabo.com/banban/magazine/top.html
܂܂ɂā@http://www.mag2.com/m/0000090196.htm



ł`E[ށ

@T߂Au܂܂v̌eeʂA30KB50KBɈグ܂
B
50KBƌ̂́ASp̕Ŗ25,000ɓ܂Błˁ[A
Ȃɏˁ[AƂ̂{łBłӎɕҏWł
̂͂ƂB

@̎]Ԃ̒ʋΘHɂ͋ǂؓ̕A̋G߂ɂ͗tʂɍ~
蒍AH͗tŖ߂Ă܂܂Bڂɂ̓}`bNYȂ̂
ÁuFHv͊₷A]Ԃׂ̍^Cł͊ȂĎd
܂Bʊwȑqw񂪂QlAuȓ]|vI
ɂłBŉ䂵ςs̐ӔCȂEE



쌠ɂ
l̂obɕۑėpȊŐL̓]ځAp͊{Iɉ
Ă܂BL̓eɂāAfŎgp邱Ƃłւ܂B
@ȂAL̃X^CV[gAHTML̃y[W쐬ɎRɎgĂ
Ăx܂B

    @        @Copyright(C) 2002  www.scollabo.com/banban/
